<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<HeadLeft :webtext="webtext"></HeadLeft>
		<view class="body">
			<view class="head">
				<u-tabs-swiper
					bg-color="#33385e"
					inactive-color="#fff"
					active-color="#7fb7ff"
					bar-width="80"
					bar-height="4"
					:bold="false"
					font-size="34"
					ref="uTabs"
					:list="list"
					:current="current"
					@change="tabsChange"
					:is-scroll="false"
					swiperWidth="750"
				></u-tabs-swiper>
			</view>
			<view class="chartULBox">
				<ul class="chartUL mui-clearfix">
					<li>
						<view class="moreSingle"></view>
						<view>做空ZK</view>
					</li>
					<li>
						<view class="moreDouble"></view>
						<view>大涨DZ</view>
					</li>
					<li>
						<view class="emptySingle"></view>
						<view>做多ZD</view>
					</li>
					<li>
						<view class="emptyDouble"></view>
						<view>小涨XZ</view>
					</li>
				</ul>
			</view>
			<view id="chart1" class="chart1"></view>
			<view id="chart2" class="chart2"></view>
			<!-- <view class="charts-box" v-if="chartData.categories.length > 0"><qiun-data-charts type="candle" :chartData="chartData" background="none" /></view> -->
			<!-- 柱形图 -->
			<!-- <canvas ref="chart" id="container"></canvas> -->
		</view>
	</view>
</template>

<script>
var myChart1, myChart2;
import * as echarts from 'echarts';
import HeadLeft from '../../components/headLeft.vue';
export default {
	components: {
		HeadLeft
	},
	data() {
		return {
			webtext: '市场走势',
			list: [],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			fData: [],
			kData: []
		};
	},
	onShow() {
		if (uni.getStorageSync('Authorized')) {
			this.getAllGamesForLobby();
		} else{
			uni.navigateTo({
				url:"/pages/login/index"
			})
		}
	},
	methods: {
		chart2(xAxisData, data1, data2) {
			var option2 = {
				title: {
					text: ''
				},
				legend: {
					data: ['买跌MD', '买涨MZ'],
					inactiveColor: '#777',
					textStyle: {
						color: '#fff'
					},
					selectedMode: false
				},
				tooltip: {},
				xAxis: {
					data: xAxisData,
					axisLine: {
						lineStyle: {
							color: '#8392A5'
						}
					}
				},
				yAxis: {
					axisLine: {
						lineStyle: {
							color: '#8392A5'
						},
						show: true
					},
					axisTick: {
						show: true //不显示坐标轴刻度线
					},
					splitLine: {
						show: false
					}
				},
				series: [
					{
						name: '买跌MD',
						type: 'bar',
						data: data1,
						animationDelay: function(idx) {
							return idx * 10;
						},
						itemStyle: {
							color: '#fe0000',
							color0: '#0CF49B',
							borderColor: '#fe0000',
							borderColor0: '#0CF49B'
						}
					},
					{
						name: '买涨MZ',
						type: 'bar',
						data: data2,
						animationDelay: function(idx) {
							return idx * 10 + 100;
						},
						itemStyle: {
							color: '#1f9541',
							color0: '#0CF49B',
							borderColor: '#1f9541',
							borderColor0: '#0CF49B'
						}
					}
				],
				animationEasing: 'elasticOut',
				animationDelayUpdate: function(idx) {
					return idx * 5;
				}
			};

			// 基于准备好的dom，初始化echarts实例
			myChart2 = echarts.init(document.getElementById('chart2'));
			// 使用刚指定的配置项和数据显示图表。
			myChart2.setOption(option2);
		},
		chart1(rawData) {
			var dates = rawData.map(function(item) {
				return item[0];
			});

			var data = rawData.map(function(item) {
				return [+item[1], +item[2], +item[3], +item[4]];
			});
			var option1 = {
				backgroundColor: '#151936',
				xAxis: {
					type: 'category',
					data: dates,
					axisLine: {
						lineStyle: {
							color: '#8392A5'
						}
					}
				},
				yAxis: {
					scale: true,
					axisLine: {
						lineStyle: {
							color: '#8392A5'
						},
						show: true
					},
					axisTick: {
						show: true //不显示坐标轴刻度线
					},
					splitLine: {
						show: false
					}
				},
				grid: {
					bottom: 40
				},
				animation: false,
				series: [
					{
						type: 'candlestick',
						name: '',
						data: data,
						itemStyle: {
							color: '#FD1050',
							color0: '#0CF49B',
							borderColor: '#FD1050',
							borderColor0: '#0CF49B'
						}
					}
				]
			};

			// 基于准备好的dom，初始化echarts实例
			myChart1 = echarts.init(document.getElementById('chart1'));
			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option1);
		},
		tabsChange(index) {
			this.current = index;
			if (index == 0) {
				this.kid = 0;
			} else if (index == 1) {
				this.kid = 1;
			} 
			myChart1.dispose();
			myChart2.dispose();
			this.GetGameHistoryData(this.kid);
		},
		getAllGamesForLobby() {
			// ajax({
			//     type: 'get',
			//     noLoad: true,
			//     url: route.$.getAllGamesForLobby,
			//     successCallback: function(data) {
			// doTRender({
			//     container: '#tradeBoxTab',
			//     data: data.games,
			//     tmplObj: '#tradeBoxTabTmpl',
			//     needClear: true
			// });
			let data = {
				games: [
					{
						name: '中金1',
						id:0,
						data: [
							{
								id: 0,
								name: '中金1',
								identifier: 'BJPCDD',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 1,
								available_limit: 1,
								online_count: 7172
							},
							{
								id: 135,
								name: '中金1-2厅',
								identifier: 'BJPCDDZ',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 100,
								available_limit: 100000,
								online_count: 9649
							},
							{
								id: 136,
								name: '中金1-3厅',
								identifier: 'BJPCDDG',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 1000,
								available_limit: 1000000,
								online_count: 6551
							},
							{
								id: 155,
								name: '中金1-4厅',
								identifier: 'BJPCDDT',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 10000,
								available_limit: 5000000,
								online_count: 2598
							}
						]
					},
					{
						name: '中金2',
						id: 1,
						data: [
							{
								id: 125,
								name: '中金2',
								identifier: '1FPCDD',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 1,
								available_limit: 1,
								online_count: 2953
							},
							{
								id: 132,
								name: '中金2-2厅',
								identifier: '1FPCDDZ',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 100,
								available_limit: 100000,
								online_count: 6041
							},
							{
								id: 133,
								name: '中金2-3厅',
								identifier: '1FPCDDG',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 1000,
								available_limit: 1000000,
								online_count: 10435
							},
							{
								id: 153,
								name: '中金2-4厅',
								identifier: '1FPCDDT',
								series_id: 14,
								is_instant: 0,
								status: 3,
								game_type: 1,
								min_bet_amount: 10000,
								available_limit: 5000000,
								online_count: 7254
							}
						]
					}
					// ,
					// {
					// 	name: '中金3',
					// 	data: [
					// 		{
					// 			id: 130,
					// 			name: '中金3',
					// 			identifier: '3FPCDD',
					// 			series_id: 14,
					// 			is_instant: 0,
					// 			status: 3,
					// 			game_type: 1,
					// 			min_bet_amount: 1,
					// 			available_limit: 1,
					// 			online_count: 5650
					// 		},
					// 		{
					// 			id: 146,
					// 			name: '中金3-2厅',
					// 			identifier: '3FPCDDZ',
					// 			series_id: 14,
					// 			is_instant: 0,
					// 			status: 3,
					// 			game_type: 1,
					// 			min_bet_amount: 100,
					// 			available_limit: 100000,
					// 			online_count: 6931
					// 		},
					// 		{
					// 			id: 147,
					// 			name: '中金3-3厅',
					// 			identifier: '3FPCDDG',
					// 			series_id: 14,
					// 			is_instant: 0,
					// 			status: 3,
					// 			game_type: 1,
					// 			min_bet_amount: 1000,
					// 			available_limit: 1000000,
					// 			online_count: 5925
					// 		},
					// 		{
					// 			id: 154,
					// 			name: '中金3-4厅',
					// 			identifier: '3FPCDDT',
					// 			series_id: 14,
					// 			is_instant: 0,
					// 			status: 3,
					// 			game_type: 1,
					// 			min_bet_amount: 10000,
					// 			available_limit: 5000000,
					// 			online_count: 8812
					// 		}
					// 	]
					// }
				]
			};
			this.fData = data;
			this.list = data.games;
			this.GetGameHistoryData(0);
		},
		GetGameHistoryData(lottery_id) {
			this.$u.api
				.getKine({
					index: lottery_id
					
				})
				.then(res => {
					// console.log(res);
					this.chart1(res.kData);
					this.chart2(res.xAxisData, res.yAxisData1, res.yAxisData2);
					// this.capImg = res.data.src;
				});
			// var pagesize = 50;
			// ajax({
			// 	url: route.$.GetKTrendData,
			// 	data: {
			// lottery_id: lottery_id,
			// count: pagesize,
			// begin_time: '',
			// end_time: ''
			// 	},
			// 	beforeSend: function() {},
			// 	successCallback: function(data) {
			// 		chart1(data.kData);
			// 		chart2(data.xAxisData, data.yAxisData1, data.yAxisData2);
			// 	}
			// });
			// let data = {
			// 	kData: [
			// 		['210720362', 10, 8, 12, 10],
			// 		['210720361', 6, 4, 8, 6],
			// 		['210720360', 13, 11, 11, 9],
			// 		['210720359', 15, 19, 13, 17],
			// 		['210720358', 16, 20, 18, 22],
			// 		['210720357', 11, 9, 9, 7],
			// 		['210720356', 14, 18, 16, 20],
			// 		['210720355', 14, 18, 16, 20],
			// 		['210720354', 16, 20, 18, 22],
			// 		['210720353', 11, 9, 9, 7],
			// 		['210720352', 6, 4, 8, 6],
			// 		['210720351', 10, 8, 12, 10],
			// 		['210720350', 4, 2, 6, 4],
			// 		['210720349', 13, 11, 11, 9],
			// 		['210720348', 12, 10, 14, 12],
			// 		['210720347', 9, 7, 7, 5],
			// 		['210720346', 16, 20, 18, 22],
			// 		['210720345', 11, 9, 9, 7],
			// 		['210720344', 19, 23, 17, 21],
			// 		['210720343', 12, 10, 14, 12],
			// 		['210720342', 12, 10, 14, 12],
			// 		['210720341', 10, 8, 12, 10],
			// 		['210720340', 14, 18, 16, 20],
			// 		['210720339', 13, 11, 11, 9],
			// 		['210720338', 13, 11, 11, 9],
			// 		['210720337', 21, 25, 19, 23],
			// 		['210720336', 2, 0, 4, 2],
			// 		['210720335', 23, 27, 21, 25],
			// 		['210720334', 15, 19, 13, 17],
			// 		['210720333', 12, 10, 14, 12],
			// 		['210720332', 15, 19, 13, 17],
			// 		['210720331', 18, 22, 20, 24],
			// 		['210720330', 17, 21, 15, 19],
			// 		['210720329', 6, 4, 8, 6],
			// 		['210720328', 11, 9, 9, 7],
			// 		['210720327', 16, 20, 18, 22],
			// 		['210720326', 15, 19, 13, 17],
			// 		['210720325', 18, 22, 20, 24],
			// 		['210720324', 17, 21, 15, 19],
			// 		['210720323', 11, 9, 9, 7],
			// 		['210720322', 18, 22, 20, 24],
			// 		['210720321', 22, 26, 24, 28],
			// 		['210720320', 21, 25, 19, 23],
			// 		['210720319', 16, 20, 18, 22],
			// 		['210720318', 15, 19, 13, 17],
			// 		['210720317', 18, 22, 20, 24],
			// 		['210720316', 13, 11, 11, 9],
			// 		['210720315', 7, 5, 5, 3],
			// 		['210720314', 16, 20, 18, 22],
			// 		['210720313', 5, 3, 3, 1]
			// 	],
			// 	xAxisData: [
			// 		'210720362',
			// 		'210720361',
			// 		'210720360',
			// 		'210720359',
			// 		'210720358',
			// 		'210720357',
			// 		'210720356',
			// 		'210720355',
			// 		'210720354',
			// 		'210720353',
			// 		'210720352',
			// 		'210720351',
			// 		'210720350',
			// 		'210720349',
			// 		'210720348',
			// 		'210720347',
			// 		'210720346',
			// 		'210720345',
			// 		'210720344',
			// 		'210720343',
			// 		'210720342',
			// 		'210720341',
			// 		'210720340',
			// 		'210720339',
			// 		'210720338',
			// 		'210720337',
			// 		'210720336',
			// 		'210720335',
			// 		'210720334',
			// 		'210720333',
			// 		'210720332',
			// 		'210720331',
			// 		'210720330',
			// 		'210720329',
			// 		'210720328',
			// 		'210720327',
			// 		'210720326',
			// 		'210720325',
			// 		'210720324',
			// 		'210720323',
			// 		'210720322',
			// 		'210720321',
			// 		'210720320',
			// 		'210720319',
			// 		'210720318',
			// 		'210720317',
			// 		'210720316',
			// 		'210720315',
			// 		'210720314',
			// 		'210720313'
			// 	],
			// 	yAxisData1: [
			// 		0,
			// 		0,
			// 		13,
			// 		15,
			// 		0,
			// 		11,
			// 		0,
			// 		0,
			// 		0,
			// 		11,
			// 		0,
			// 		0,
			// 		0,
			// 		13,
			// 		0,
			// 		9,
			// 		0,
			// 		11,
			// 		19,
			// 		0,
			// 		0,
			// 		0,
			// 		0,
			// 		13,
			// 		13,
			// 		21,
			// 		0,
			// 		23,
			// 		15,
			// 		0,
			// 		15,
			// 		0,
			// 		17,
			// 		0,
			// 		11,
			// 		0,
			// 		15,
			// 		0,
			// 		17,
			// 		11,
			// 		0,
			// 		0,
			// 		21,
			// 		0,
			// 		15,
			// 		0,
			// 		13,
			// 		7,
			// 		0,
			// 		5
			// 	],
			// 	yAxisData2: [
			// 		-10,
			// 		-6,
			// 		0,
			// 		0,
			// 		-16,
			// 		0,
			// 		-14,
			// 		-14,
			// 		-16,
			// 		0,
			// 		-6,
			// 		-10,
			// 		-4,
			// 		0,
			// 		-12,
			// 		0,
			// 		-16,
			// 		0,
			// 		0,
			// 		-12,
			// 		-12,
			// 		-10,
			// 		-14,
			// 		0,
			// 		0,
			// 		0,
			// 		-2,
			// 		0,
			// 		0,
			// 		-12,
			// 		0,
			// 		-18,
			// 		0,
			// 		-6,
			// 		0,
			// 		-16,
			// 		0,
			// 		-18,
			// 		0,
			// 		0,
			// 		-18,
			// 		-22,
			// 		0,
			// 		-16,
			// 		0,
			// 		-18,
			// 		0,
			// 		0,
			// 		-16,
			// 		0
			// 	]
			// };
			// this.kData = data;
			// this.chart1(data.kData);
			// this.chart2(data.xAxisData, data.yAxisData1, data.yAxisData2);
		}
	}
};
</script>

<style scoped>
.body {
	height: calc(100vh - 88upx - 100upx - var(--status-bar-height));
	overflow-y: auto;
}
.body .head {
	height: 80upx;
}
.charts-box {
	width: 100%;
	height: 500upx;
}
#container {
	width: 800upx;
	height: 600upx;
}
.chartULBox {
	padding: 0 0 10upx 10upx;
	position: absolute;
	left: 0;
	top: 180upx;
	z-index: 1;
	width: 100%;
}

.chartUL {
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.chartUL li {
	display: inline-block;
	margin-right: 10upx;
	font-size: 0.6em;
	color: #fff;
	line-height: 100upx;
}

.chartUL li view {
	float: left;
}

.chartUL li view:nth-child(1) {
	margin-right: 10upx;
}
.chart1 {
	margin: 0 0 0 20upx;
	height: 600upx;
	padding-top: 20upx;
	background: #151936;
}

.chart2 {
	padding: 0 0 0 20upx;
	height: 400upx;
	border-top: 16upx solid #30395e;
}

.doMore {
	width: 8upx;
	height: 88upx;
	background: #fa0202;
}

.doEmpty {
	width: 8upx;
	height: 88upx;
	background: #209345;
}

.moreSingle {
	position: relative;
	width: 12upx;
	height: 60upx;
	background: #fa0202;
}

.moreSingle:after {
	content: '';
	position: absolute;
	left: 4upx;
	width: 4upx;
	height: 32upx;
	background: #fa0202;
	bottom: -32upx;
}

.moreDouble {
	position: relative;
	width: 12upx;
	height: 60upx;
	background: #fa0202;
	margin-top: 28upx;
}

.moreDouble:after {
	content: '';
	position: absolute;
	left: 4upx;
	width: 4upx;
	height: 32upx;
	background: #fa0202;
	top: -32upx;
}

.emptySingle {
	position: relative;
	width: 12upx;
	height: 28upx;
	background: #3bf09f;
	margin-top: 12upx;
}

.emptySingle:after {
	content: '';
	position: absolute;
	left: 4upx;
	width: 4upx;
	height: 28upx;
	background: #3bf09f;
	bottom: -28upx;
}

.emptyDouble {
	position: relative;
	width: 8upx;
	height: 24upx;
	background: #3bf09f;
	margin-top: 12upx;
}

.emptyDouble:after {
	content: '';
	position: absolute;
	left: -4upx;
	width: 12upx;
	height: 28upx;
	background: #3bf09f;
	bottom: -28upx;
}
</style>
